<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>粮情检测</title>
    <link rel="stylesheet" href="../css/theme.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/Grainsituation.css" />
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" href="../css/iconfont.ttf" />
    <link rel="stylesheet" href="../layui-v2.8.17/layui/css/layui.css" />
    <!-- VConsole 初始化 -->
    <script src="../lib/vconsole/vconsole.min.js"></script>
    <script src="../js/vconsole-init.js"></script>
    <script src="../layui-v2.8.17/layui/layui.js"></script>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/utils.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/widgets.js"></script>
    <script src="../js/warom-utils.js"></script>
    <script src="../js/android-interface.js"></script>
    <!-- 全局配置 -->
    <script src="../js/config.js"></script>
    <!-- 模拟数据 -->
    <script src="../js/mock/mock-grain-data.js"></script>
    <!-- 引入粮情检测模块JS -->
    <script src="../js/grainsituation.js"></script>
    <style>
      /* 历史数据图表样式 */
      .history-chart-container {
        background-color: transparent;
        border: 1px solid rgba(44, 74, 125, 0.4);
        border-radius: 8px;
        padding: 0;
        height: calc(100% - 20px);
        min-height: 400px;
        overflow: hidden;
      }
      
      .history-chart {
        width: 100%;
        height: 100%;
        min-height: 380px;
      }
      
      /* 图表控制区域 */
      .chart-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      
      .chart-type-selector {
        background-color: #2c4a7d;
        border-radius: 4px;
        overflow: hidden;
        display: inline-flex;
      }
      
      .chart-type-option {
        padding: 8px 15px;
        cursor: pointer;
        color: #a0b3d8;
      }
      
      .chart-type-option.active {
        background-color: #3a5b91;
        color: #ffffff;
      }
      
      /* 修改Tab样式，使其与第二张图风格一致 */
      .tab-container {
        background-color: #1e3c72;
        border-radius: 0;
        padding: 10px 15px;
      }
      
      .tab-item {
        border-radius: 4px;
        padding: 8px 15px;
        margin-right: 5px;
        background-color: transparent;
      }
      
      .tab-item.active {
        background-color: #2c4a7d;
      }
      
      .tab-item i {
        margin-right: 5px;
      }
      
      /* 修改info-bar样式 */
      .info-bar {
        background-color: #1e3c72;
        border-radius: 4px;
        padding: 10px 15px;
        margin-bottom: 10px;
      }
      
      /* 修改历史图表样式，使其与第二张图风格一致 */
      #history-panel .info-bar {
        background: transparent;
        border-bottom: 1px solid rgba(44, 74, 125, 0.4);
        border-radius: 0;
        margin-bottom: 0;
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .chart-controls-group {
        display: flex;
        align-items: center;
      }
      


      .cable-selection-bar {
        padding: 10px 15px;
        background-color: #1a3563; /* slightly different bg for separation */
        border-bottom: 1px solid rgba(44, 74, 125, 0.4);
        max-height: 130px; /* 限制最大高度，约3行 */
        overflow-y: auto; /* 超出高度则显示滚动条 */
      }
      
      .top-controls-bar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10px;
      }
      
      .chart-controls-group {
        display: flex;
        align-items: center;
        gap: 15px;
      }
      
      /* 自定义下拉框样式 */
      .custom-select-wrapper {
        position: relative;
      }
      
      .custom-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: rgba(44, 74, 125, 0.3);
        color: #a0b3d8;
        border: 1px solid rgba(60, 120, 230, 0.4);
        border-radius: 4px;
        padding: 6px 30px 6px 12px;
        font-size: 14px;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0b3d8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
      }
      
      .custom-select:hover {
        border-color: rgba(60, 120, 230, 0.7);
      }
      
      .custom-select:focus {
        outline: none;
        border-color: rgba(60, 120, 230, 0.9);
        box-shadow: 0 0 0 2px rgba(60, 120, 230, 0.2);
      }
      
      #history-panel .chart-type-selector {
        display: flex;
        border: 1px solid rgba(60, 120, 230, 0.4);
        border-radius: 4px;
        overflow: hidden;
      }
      
      #history-panel .chart-type-option {
        background-color: rgba(44, 74, 125, 0.3);
        color: #a0b3d8;
        border: none;
        padding: 6px 12px;
        font-size: 14px;
        cursor: pointer;
      }
      
      #history-panel .chart-type-option:not(:last-child) {
        border-right: none;
      }
      
      #history-panel .chart-type-option:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
      
      #history-panel .chart-type-option:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
      
      #history-panel .chart-type-option.active {
        background-color: rgba(60, 120, 230, 0.5);
        color: #ffffff;
        text-shadow: 0 0 5px #fff;
      }

      /* 电缆选择器样式 */
      .cable-selector-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-right: 15px;
      }

      .cable-checkbox-label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        color: #a0b3d8;
        background-color: rgba(44, 74, 125, 0.3);
        border: 1px solid rgba(60, 120, 230, 0.4);
        padding: 6px 12px;
        border-radius: 4px;
        transition: all 0.2s ease;
      }

      .cable-checkbox-label input {
        display: none;
      }
      
      .cable-checkbox-label:hover {
        border-color: rgba(60, 120, 230, 0.7);
      }

      .cable-checkbox-label input:checked + .checkbox-custom {
        background-color: #3c78d8;
        border-color: #3c78d8;
      }

      .cable-checkbox-label input:checked + .checkbox-custom::before {
        opacity: 1;
      }
      
      .checkbox-custom {
        width: 1em;
        height: 1em;
        border: 1px solid #a0b3d8;
        border-radius: 2px;
        margin-right: 8px;
        display: inline-block;
        position: relative;
        transition: all 0.2s ease;
      }

      .checkbox-custom::before {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 0.8em;
        font-weight: bold;
        opacity: 0;
        transition: opacity 0.2s ease;
      }
    </style>
  </head>
  <body>
    <!-- 公共头部 -->
    <header class="common-header"></header>
    
    <div class="tab-container">
      <div class="tab-item active">
        <i class="layui-icon layui-icon-chart-screen"></i>
        <span>测温电缆</span>
      </div>
      <div class="tab-item">
        <i class="layui-icon layui-icon-template-1"></i>
        <span>多参数电缆</span>
      </div>
      <div class="tab-item">
        <i class="layui-icon layui-icon-chart"></i>
        <span>历史数据</span>
      </div>
    </div>
    
    <main>
      <div class="panel active" id="temperature-panel">
        <div class="info-bar">
          <div class="temp-display">
            <i class="layui-icon layui-icon-templeate-1"></i>
            <span>仓温: --℃</span>
          </div>
          <div class="status-legend">
            <div class="status-item"><span class="status-dot normal"></span>正常</div>
            <div class="status-item"><span class="status-dot warning"></span>警告</div>
            <div class="status-item"><span class="status-dot danger"></span>危险</div>
          </div>
        </div>
        
        <div class="tables-wrapper">
          <div id="temperature-tables-container" class="tables-container">
            <!-- 所有测温电缆表格将被动态添加到这里 -->
          </div>
        </div>
      </div>
      
      <div class="panel" id="multiparameter-panel">
        <div class="info-bar">
          <div class="temp-display">
            <i class="layui-icon layui-icon-templeate-1"></i>
            <span>仓温: --℃ 仓湿: ---%</span>
          </div>
          <div class="status-legend">
            <div class="status-item"><span class="status-dot normal"></span>正常</div>
            <div class="status-item"><span class="status-dot warning"></span>警告</div>
            <div class="status-item"><span class="status-dot danger"></span>危险</div>
          </div>
        </div>
        
        <div class="tables-wrapper">
          <div id="multiparameter-tables-container" class="tables-container">
            <!-- 所有多参数电缆表格将被动态添加到这里 -->
          </div>
        </div>
      </div>
      
      <div class="panel" id="history-panel">
        <div class="top-controls-bar">
          <div class="chart-controls-group">
            <div class="custom-select-wrapper">
              <select id="time-range-select" class="custom-select">
                <option value="1">最近1分钟</option>
                <option value="5">最近5分钟</option>
                <option value="10">最近10分钟</option>
                <option value="30">最近30分钟</option>
                <option value="60">最近1小时</option>
                <option value="1440" selected>最近24小时</option>
              </select>
            </div>
            <div class="chart-type-selector">
              <div class="chart-type-option active" data-type="temperature">温度</div>
              <div class="chart-type-option" data-type="humidity">湿度</div>
            </div>
          </div>
        </div>
        <div class="cable-selection-bar" id="cable-selection-bar">
          <div id="cable-selector-container" class="cable-selector-container">
            <label class="cable-checkbox-label select-all-label">
              <input type="checkbox" id="select-all-cables">
              <span class="checkbox-custom"></span>
              全部选择
            </label>
            <!-- 电缆选择器将动态生成在这里 -->
          </div>
        </div>
        
        <div class="history-chart-container">
          <div id="history-chart" class="history-chart"></div>
        </div>
      </div>
    </main>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 加载保存的主题
            loadSavedTheme();
            // 初始化公共头部
            initCommonHeader('粮情检测', true);
            // 初始化页面
            init();
        });
    </script>
  </body>
</html>
